<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>登录页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<link href="css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/ace.min.css" />
		<link rel="stylesheet" href="css/ace-rtl.min.css" />
		<link href="css/drag.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="css/layui.css" media="all"/>
		<script src="http://at.alicdn.com/t/font_631371_r5yz88nf80k9.js"></script>
		<script src='js/jquery-2.0.3.min.js'></script>
		<script src="/js/qrcode.js"></script>
		<script src="/layui.js"></script>
		<script>
		    var layer;
		    var $;
		    layui.use(['layer'], function () {
		    	$ = layui.jquery, layer = layui.layer;
		    })
		</script>
		<script type="text/javascript">
		//注册
		function sendCodeToEmail(){
			var email = $('#reg_email').val();
			var re = /^[a-zA-Z0-9]([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)+@([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}$/;
			if(email==""){
				layer.msg("请输入您的邮箱！");
				return ;
			}
			if(!re.test(email))
		    {
		        layer.msg("邮箱格式不正确!");
		        return ;
		    }
			if(!$(".handler").hasClass('handler_ok_bg')){
				layer.msg("请拖动滑块验证！");
				return ;
			}
			$('#sendReg').attr("disabled","disabled");
			$.ajax({
	            url: "../sendEmailForReg",
	            type: "POST",
	            data:{email:email},
	            success: function (data) {
	            	if(data=="注册验证邮件已经发送"){
	            		$('#reg_email').attr("disabled","disabled");
	            		layer.msg("验证码已经发送至您的邮箱,十分钟内有效");
	            	}else{
	            		$('#sendReg').removeAttr("disabled");
	            		layer.msg(data);
	            	}
	            	
	            }
	        });
		}
		
		
		function check_email(){
			$.post("/validateEmailCode",{
	             inputCode:$("#email_code").val(),
	         },function(data,status){
            	 if(data=="true"){
                 	$("#reg-result").html("√");
	             }else{
	            	 $("#reg-result").html("×"); 
	             }
	         });
		}
		
		//点击注册
		function submitReg(){
			var email=$('#reg_email').val();
			var email_code=$('#email_code').val();
			var password=$('#reg_password').val();
			var repassword=$('#reg_repassword').val();
			var re = /^[a-zA-Z0-9]([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)+@([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}$/;
			var passwordTest = /^[a-zA-Z0-9._]{6,16}$/;
			if(email==""){
				layer.msg("请输入您的邮箱！");
				return ;
			}
			if(!re.test(email))
		    {
		        layer.msg("邮箱格式不正确!");
		        return ;
		    }
			if(email_code==""){
				layer.msg("请输入邮箱验证码！");
				return ;
			}
			if(!$("#reg-result").text()=="√"){
				layer.msg("邮箱验证码错误！");
				return ;
			}
			if(password==""){
				layer.msg("请设置密码！");
				return ;
			}
			if(!passwordTest.test(password))
		    {
		        layer.msg("密码必须由6-16位字符组成!");
		        return ;
		    }
			if(password!=repassword){
			    layer.msg("两次密码不一致!");
			    return ;
			}
			if(!$('#reg_checkbox').is(':checked')){
				layer.msg("请选择接受用户协议！");
				return ;
			}
			$("#regSubmit").attr("disabled","disabled");
			$.post("/register",{
				password:password,
				email:email,
				inputCode:email_code
	         },function(data,status){
	        	 if(data=="注册成功"){
	        		 layer.open({
	        		        type: 1,
	        		        title: "提示信息",
	        		        closeBtn: false,
	        		        area: '280px',
	        		        btn: ['确认'],
	        		        moveType: 1, //拖拽模式，0或者1
	        		        content: '<div style="padding:15px 20px; text-align:justify; line-height: 22px; text-indent:2em;border-bottom:1px solid #e2e2e2;"><p>注册成功,请登录</p></div>',
	        		        success: function(layero){
	        		        	var btn = layero.find('.layui-layer-btn');
	        					btn.css('text-align', 'center');
	        					btn.on("click",function(){
	        						show_box('login-box');
	        		            	 return false;
	        					})
	        		        }
	        		    });
	        	 }else{
	        		 layer.msg(data);
	        		 $('#regSubmit').removeAttr("disabled");
	        	 }
	         });
		}
		
		//发送找回密码邮件
		function sendFind(){
			var email = $('#f_email').val();
			var f_code = $('#f_code').val();
			var re = /^[a-zA-Z0-9]([a-zA-Z0-9]*[-_.]?[a-zA-Z0-9]+)+@([a-zA-Z0-9]+\.)+[a-zA-Z]{2,}$/;
			if(email==""){
				layer.msg("请输入您的邮箱！");
				return ;
			}
			if(!re.test(email))
		    {
		        layer.msg("邮箱格式不正确!");
		        return ;
		    }
			if(f_code==""){
				layer.msg("请输入验证码！");
				return ;
			}
			if($("#f_result").text()!="√"){
				layer.msg("验证码错误！");
				return ;
			}
			$('#sendToFind').attr("disabled","disabled");
			$.ajax({
	            url: "../findpassword",
	            type: "POST",
	            data:{email:email},
	            success: function (data) {
	            	layer.msg(data);
	            	if(data!="重置密码邮件已发送，请按邮件提示重置密码"){
	            		$('#sendToFind').removeAttr("disabled");
	            	}
	            }
	        });
		}
		
		//找回密码验证码
		function f_change() {
	        document.getElementById("f_img").src = "/getCode";
	    }
		
		function f_check_number(){
			$.post("/validateCode",{
	             inputCode:$("#f_code").val(),
	         },function(data,status){
	             if(data=="false"){
	                 $("#f_result").html("×");    
	             }else if(data=="true"){
	                 $("#f_result").html("√");
	             }
	         });
		}
		
		
		
		function login(){
			var rememberMe;
			var r=document.getElementsByName("rememberMe"); 
			if(r[0].checked){
				rememberMe='1';
			}else{
				rememberMe='0';
			}
			$.post("/toLogin",{
				username:$("#l_username").val(),
				password:$("#l_password").val(),
				rememberMe:rememberMe,
	         },function(data,status){
	        	 if(data.message=="登录成功"){
	        		 location.href = "/";
	             }else{
	            	 layer.msg(data.message);
	             }
	             
	         });
		}
		
		function goIndex(){
			location.href="../";
		}
		
		
		//微信登录
		/*<![CDATA[*/
		var i = 0;           
	    function checkLogin(){
	    	var sessionId = $("#sessionId").val();
	    	if(sessionId!=""){
	    		$.ajax({
	                url: "/wechat/polling",
	                type: "POST",
	                data:{sessionId:sessionId},
	                success: function (data) {
	                	if(data.status=="200"){
	                		window.clearInterval(c);
	                		alert(data.message);
	                		location.href = "/";
	                	}else if(data.status=="501"){
	                		window.clearInterval(c);
	                		alert(data.message);
	                	}else if(data.status=="502"){
	                		window.clearInterval(c);
	                		alert(data.message);
	                	}else {
	                		i++;
	                		console.log(i);
	                		if(i>30){
	                			window.clearInterval(c);
	                			i = 0;
	                			alert("二维码已失效！请刷新二维码。");
	                		}
	                	}
	                }
	        	});
	    	}
	    }
	    
	    function wechatLogin(){
	    	$.ajax({
	            url: "/wechat/wxLoginPage",
	            type: "POST",
	            success: function (data) {
	            	$("#sessionId").val(data.sessionId);
	            	
	            	var qrcode = new QRCode(document.getElementById("wechatCode"), {
	                    width : 200,//设置宽高
	                    height : 200
	                });
	                qrcode.makeCode(data.uri);
	                c = setInterval(checkLogin,5000);//轮询查询
	                show_box('wechat-box');
	            	return false;
	            }
	    	});
	    }
	    /*]]>*/
		
		</script>
	</head>

	<body class="login-layout">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center" onclick="goIndex()">
								<h1>
									<i class="icon-leaf green"></i>
									<span class="red">慈善</span>
									<span class="white">图书系统</span>
								</h1>
								<h4 class="blue">&copy; Charity Book</h4>
							</div>

							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header blue lighter bigger">
												<i class="icon-coffee green"></i>
												请输入账号密码
											</h4>

											<div class="space-6"></div>

												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" placeholder="手机号/邮箱" name="username" id="l_username"/>
															<i class="icon-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="密码" name="password" id="l_password"/>
															<i class="icon-lock"></i>
														</span>
													</label>

													<div class="space"></div>

													<div class="clearfix">
														<label class="inline">
															<input type="checkbox" class="ace" name="rememberMe" value="1" id="rememberMe"/>
															<span class="lbl"> 记住密码</span>
														</label>

														<button id="tologin" onclick="login()" type="button" class="width-35 pull-right btn btn-sm btn-primary">
															<i class="icon-key"></i>
															登录
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>

											<div class="social-or-login center">
												<span class="bigger-110">其他 登录</span>
											</div>
											
											<!-- 微信登录 -->
											<div class="social-login center">
												<input type="hidden" id="sessionId"/>
												<a class="" onclick="wechatLogin()">
													<svg class="icon" aria-hidden="true" style="width: 42px;height: 42px;">
														<use xlink:href="#icon-wechat"></use>
													</svg>
												</a>
											</div>
										</div><!-- /widget-main -->

										<div class="toolbar clearfix">
											<div>
												<a href="#" onclick="show_box('forgot-box'); return false;" class="forgot-password-link">
													<i class="icon-arrow-left"></i>
													忘记密码
												</a>
											</div>

											<div>
												<a href="#" onclick="show_box('signup-box'); return false;" class="user-signup-link">
													去注册
													<i class="icon-arrow-right"></i>
												</a>
											</div>
										</div>
									</div><!-- /widget-body -->
								</div><!-- /login-box -->

								<div id="forgot-box" class="forgot-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header red lighter bigger">
												<i class="icon-key"></i>
												找回密码
											</h4>
											<div class="space-6"></div>
											<p>
												输入您注册时的邮箱
											</p>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="Email" id="f_email"/>
															<i class="icon-envelope"></i>
														</span>
													</label>
													<label class="block clearfix">
														<input type="text" class="form-control" name="f_code" id="f_code"  placeholder="请输入右侧验证码" onblur="f_check_number();" style="width: 50%;display: inline-block;height: 41px;"/>
														<span id="f_result" style="color: red;width: 7%;"></span>
														<img id="f_img" alt="captcha" height="100%;" class="pull-right" src="/getCode"  onclick="f_change();" style="width: 40%"/>
													</label>

													<div class="clearfix">
														<button type="button" class="width-35 pull-right btn btn-sm btn-danger" id="sendToFind" onclick="sendFind()">
															<i class="icon-lightbulb"></i>
															 发送!
														</button>
													</div>
												</fieldset>
											</form>
										</div><!-- /widget-main -->

										<div class="toolbar center">
											<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
												返回登录
												<i class="icon-arrow-right"></i>
											</a>
										</div>
									</div><!-- /widget-body -->
								</div><!-- /forgot-box -->

								<div id="signup-box" class="signup-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header green lighter bigger">
												<i class="icon-group blue"></i>
												注册账号
											</h4>

											<div class="space-6"></div>
											<p> 请输入您的信息: </p>

											<form  id="regForm">
												<fieldset>
													
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="邮箱" name="email" id="reg_email"/>
															<i class="icon-envelope"></i>
														</span>
													</label>
													
													<label class="block clearfix">
															<div id="drag"></div>		
													</label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text"  id="email_code" class="form-control" placeholder="邮箱验证码" onblur="check_email();" style="width: 50%;display: inline-block;"/>
															<span id="reg-result" style="color: red;width: 7%;"></span>
															<button type="button" class="pull-right btn btn-sm btn-success" onclick="sendCodeToEmail()" id="sendReg" style="width: 40%;">
																发送验证码
																<i class="icon-arrow-right icon-on-right"></i>
															</button>
														</span>
													</label>
													
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="密码" name="password" id="reg_password"/>
															<i class="icon-lock"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" placeholder="再次输入密码" id="reg_repassword"/>
															<i class="icon-retweet"></i>
														</span>
													</label>

													<label class="block">
														<input type="checkbox" class="ace" id="reg_checkbox"/>
														<span class="lbl">
															我接受
															<a href="#">用户协议</a>
														</span>
													</label>

													<div class="space-24"></div>

													<div class="clearfix">
														<button type="reset" class="width-30 pull-left btn btn-sm">
															<i class="icon-refresh"></i>
															重置
														</button>

														<button id="regSubmit" type="button" class="width-65 pull-right btn btn-sm btn-success" onclick="submitReg()">
															注册
															<i class="icon-arrow-right icon-on-right"></i>
														</button>
													</div>
												</fieldset>
											</form>
										</div>

										<div class="toolbar center">
											<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
												<i class="icon-arrow-left"></i>
												返回登录
											</a>
										</div>
									</div><!-- /widget-body -->
								</div><!-- /signup-box -->
							
								<div id="wechat-box" class="signup-box widget-box no-border">
									<div style="padding:80px;">
									<h1 style="color:#fff;">请使用微信扫描二维码登录</h1>
									<br/>
									<div id="wechatCode"></div>
									</div>
								</div>
							</div><!-- /position-relative -->
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div>
		</div><!-- /.main-container -->


		
		<script src='js/jquery.mobile.custom.min.js'></script>
		<script type="text/javascript">
			function show_box(id) {
			 jQuery('.widget-box.visible').removeClass('visible');
			 jQuery('#'+id).addClass('visible');
			}
		</script>
		<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
		<script src="js/drag.js" type="text/javascript"></script>
		<script type="text/javascript">
			$('#drag').drag();
		</script>
</body>
</html>
